<template>
  <div class="account">
    <el-breadcrumb separator="/">

      <el-breadcrumb-item :to="{path:'/sys/account?navIndex=0'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账户中心</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="section-content">
      <el-main class="content-wrapper">
        <el-row>
          <el-col :span="24">
            <el-form
              :label-position="labelPosition"
              label-width="120px"
              :model="userInfo"
              style="width:486px;"
            >
              <el-form-item label="头像：">
                <div class="info-wrap">
                  <div class="ava-wrap">
                    <img class="ava" v-if="userInfo.headImg"  :src="userInfo.headImg" alt />
                    <img class="ava" v-if="!userInfo.headImg" src="../../assets/img/user.jpg" alt />
                  </div>
                  <span class="edit" @click="editAva">编辑</span>
                </div>
              </el-form-item>
            </el-form>

            <el-form
              :label-position="labelPosition"
              label-width="120px"
              :model="userName"
              style="width:486px;"
              :rules="nameRules"
              ref="nameForm"
              class="userinfo-form"
            >
              <el-form-item label="姓名：" prop="realName">
                <div class="info-wrap" v-show="infoFlag.nameFlag==1">
                  <p class="userInfo-wrap">{{userName.realName}}</p>
                  <span class="edit" @click="nameEdi">编辑</span>
                </div>
                <el-input
                  v-show="infoFlag.nameFlag==0"
                  v-model="userName.realName"
                  style="width:250px;padding-left:14px;"
                ></el-input>
                <span class="save-btn" @click="saveInfo('name')" v-if="infoFlag.nameFlag==0">保存</span>
              </el-form-item>
            </el-form>

            <el-form
              :label-position="labelPosition"
              label-width="120px"
              :model="userTel"
              style="width:486px;"
              :rules="telRules"
              ref="telForm"
              class="userinfo-form"
            >
              <el-form-item label="手机号：" prop="phoneNum">
                <div class="info-wrap" v-show="infoFlag.telFlag==1">
                  <p class="userInfo-wrap">{{userTel.phoneNum}}</p>
                  <span class="edit" @click="telEdi" v-if="infoFlag.telFlag==1">编辑</span>
                </div>
                <el-input
                  v-show="infoFlag.telFlag==0"
                  v-model="userTel.phoneNum"
                  style="width:250px;padding-left:14px;"
                ></el-input>
                <span class="save-btn" @click="saveInfo('tel')" v-if="infoFlag.telFlag==0">保存</span>
              </el-form-item>
            </el-form>

            <el-form :label-position="labelPosition" label-width="120px" style="width:486px;">
              <el-form-item label="登录密码：">
                <div class="info-wrap">
                  <p class="userInfo-wrap">******</p>
                  <span class="edit" @click="dialog.passDialog = true">编辑</span>
                </div>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-main>
    </section>
    <!-- 修改头像对话框 -->
    <el-dialog title="修改头像" :visible.sync="dialog.avaDialog" width="440px">
      <div class="cut_pic">
        <div class="cut">
          <vue-cropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
          ></vue-cropper>
        </div>
        <div class="preview">
          <img :src="preview" alt />
        </div>
      </div>
      <div class="select_img">
        <div class="select_input">
          <el-button type="primary" size="mini">上传</el-button>
          <input class="select_input_input" type="file" @change="changeFile" accept="image/*" />
          <el-button class="select_img_btn_yl" size="mini" @click="stop">预览</el-button>
        </div>
      </div>
      <div class="upload_pic">
        <p>(支持200KB以下JPG，PNG格式的图片)</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.avaDialog = false">取 消</el-button>
        <el-button type="primary" @click="uploadImg">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改密码"
      :visible.sync="dialog.passDialog"
      width="25%"
      :modal-append-to-body="false"
    >
      <el-form
        :model="form"
        label-position="right"
        label-width="80px"
        size="small"
        ref="form"
        :rules="rules"
      >
        <el-form-item label="旧密码" prop="oldPass">
          <el-input type="password" v-model="form.oldPass" placeholder="输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input type="password" v-model="form.newPass" placeholder="输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePass">
          <el-input type="password" v-model="form.rePass" placeholder="输入确认密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="dialog.passDialog = false">取 消</el-button>
        <el-button size="small" type="primary" @click="changePass">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { setItem, getItem } from "../../tools/common";
import { bus } from "../../tools/bus";
import VueCropper from "vue-cropper";
export default {
  data() {
    let validateRepass = (rules, value, callback) => {
      if (value == "") {
        callback(new Error("请输入新密码"));
      } else if (value != this.form.newPass) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      userInfo: {
        headImg: ""
      },
      labelPosition: "right",
      infoFlag: {
        nameFlag: 1,
        telFlag: 1
      },
      dialog: {
        avaDialog: false,
        passDialog: false
      },
      // 修改头像
      option: {
        img: "",
        size: 1,
        full: false,
        outputType: "png",
        canMove: true,
        fixedBox: false,
        original: false,
        canMoveBox: false
      },
      preview: "",
      form: {
        oldPass: "",
        newPass: "",
        rePass: ""
      },
      rules: {
        oldPass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度6-12之间"
          }
        ],
        newPass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度6-12之间"
          }
        ],
        rePass: [{ validator: validateRepass, trigger: "blur" }]
      },
      userName: {
        realName: ""
      },
      nameRules: {
        realName: [
          { required: true, message: "不能为空", trigger: "blur" },
          { min: 2, max: 20, message: "长度2-20之间" }
        ]
      },
      userTel: {
        phoneNum: ""
      },
      telRules: {
        phoneNum: { required: true, validator: checkPhone, trigger: "blur" }
      }
    };
  },
  methods: {
    // 点击修改头像编辑
    editAva() {
      this.dialog.avaDialog = true;
    },

    nameEdi() {
      this.infoFlag.nameFlag = 0;
    },
    telEdi() {
      this.infoFlag.telFlag = 0;
    },
    saveInfo(_type) {
      let url = "";
      let p = {};
      let info = getItem("info");
      let _this = this;
      p.mngId = info.mngId;
      if (_type == "name") {
        url = "/mng/modifyRealName";
        p.realName = this.userName.realName;
        this.$refs["nameForm"].validate(valid => {
          if (valid) {
            _this.ediHttp(url, p, _type);
          }
        });
      }
      if (_type == "tel") {
        url = "/mng/modifyPhoneNum";
        p.phoneNum = this.userTel.phoneNum;
        this.$refs["telForm"].validate(valid => {
          if (valid) {
            _this.ediHttp(url, p, _type);
          }
        });
      }
    },
    ediHttp(url, p, type) {
      console.log(`p`, p);
      this.$http
        .fetch(url, p)
        .then(res => {
          console.log(`res`, res.data);
          this.$message({
            message: "修改成功",
            type: "success"
          });
          let info = getItem("info");
          if (type == "name") {
            this.infoFlag.nameFlag = 1;
            info.realName = p.realName;
          } else if (type == "tel") {
            this.infoFlag.telFlag = 1;
            info.phoneNum = p.phoneNum;
          }
          setItem("info", info);
          bus.$emit("updateData");
        })
        .catch(err => {});
    },
    changePass() {
      // console.log("changePass");
      this.$refs["form"].validate(valid => {
        if (valid) {
          // _this.ediHttp(url, p, _type);
          let url = "/mng/modifyPass";
          let info = getItem("info");
          let p = {};
          p.mngId = info.mngId;
          p.password = this.form.oldPass;
          p.newPass = this.form.newPass;
          this.$http
            .fetch(url, p)
            .then(res => {
              console.log(`res`, res);
              if (res.code == 0) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
              }
              this.dialog.passDialog = false;
            })
            .catch(err => {
              this.dialog.passDialog = false;
            });
        }
      });
    },
    fetchData(_type) {
      let url = "/mng/info";
      let info = getItem("info")?getItem("info"):{};
      let p = {
        mngId: info.mngId
      };
      this.$http
        .fetch(url, p)
        .then(res => {
          console.log(`res`, res.data);
          this.userInfo.headImg = res.data.headImg;
          this.userName.realName = res.data.realName;
          this.userTel.phoneNum = res.data.phoneNum;
          if (_type == 1) {
            setItem("info", res.data);
            bus.$emit("updateData");
          }
        })
        .catch(err => {});
    },
    // 头像上传
    changeFile(e) {
      let _this = this;
      let event = window.event || e;
      let file = event.target.files[0];
      if (file != undefined) {
        if (file.size > 200 * 1024) {
          this.$message({
            message:'上传的图片过大',
            type:'error'
          })
          return false;
        }
        let fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onloadend = function(e) {
          _this.option.img = e.target.result;
        };
        _this.preview = "";
        _this.start();
      } else {
        return false;
      }
    },
    start() {
      this.$refs.cropper.startCrop();
    },
    stop() {
      this.$refs.cropper.stopCrop();
      this.crop();
    },
    clear() {
      this.$refs.cropper.clearCrop();
    },
    // 预览
    crop() {
      let _this = this;
      _this.$refs.cropper.getCropData(data => {
        _this.preview = data;
      });
    },
    uploadImg() {
      let _this = this;
      let url = "/student/uploadImg";
      let p = {};
      console.log("头像上传");
      if (_this.preview == "") {
        console.log("没预览");

        _this.stop();
      }

      setTimeout(function() {
        console.log(_this.preview);
        let p = {};
        let url = "/upload/base64";
        let info = getItem("info");
        p.base64Str = _this.preview;
        p.communityId = info.communityId;
        _this.$http.fetch(url, p).then(res => {
          if (res.code == 0) {
            _this.ediImg(info.mngId, res.data.url);
          } else {
            this.$message({
              message: "上传失败",
              type: "error"
            });
          }
          // _this.uploadImg(res.data.url);
        });
      }, 100);
    },
    ediImg(_mngId, dataUrl) {
      let p = {
        mngId: _mngId,
        headImg: dataUrl
      };
      console.log(p);
      let url = "/mng/modifyHeadImg";
      this.$http.fetch(url, p).then(res => {
        console.log(res);
        this.$message({
          message: res.msg,
          type: "success"
        });
        this.fetchData(1);
        this.dialog.avaDialog = false;
      });
    }
  },
  components: {
    VueCropper
  },
  mounted() {
    this.fetchData(0);
  }
};
</script>

<style scoped>
.el-form-item__content p {
  margin-left: 28px;
}
.ava {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.ava-wrap {
  height: 40px;
  margin-left: 28px;
  width: 250px;
}
.userInfo-wrap {
  /* border: 1px solid red; */
  width: 250px;
}
.info-wrap {
  display: flex;
}
.edit {
  color: #1e88e5;
}
.edit:hover {
  cursor: pointer;
}
.cut {
  width: 250px;
  height: 250px;
}
.cut_pic {
  display: flex;
}
.cut_pic img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-left: 30px;
}
.select_img {
  margin-top: 16px;
}
.upload_pic {
  margin-top: 16px;
}
.select_input_input {
  position: absolute;
  width: 80px;
  left: -12px;
  top: 0px;
  z-index: 2;
  height: 42px;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
  cursor: pointer;
}
.select_input {
  position: relative;
}
.save-btn:hover {
  cursor: pointer;
}
.save-btn {
  margin-left: 10px;
  color: #1e88e5;
}
.userinfo-form >>> .el-form-item__error {
  padding-left: 14px;
}
</style>

